<template>
  <div>
    <el-popover
        placement="top"
        width="160"
        v-model="visible">
      <p>确定删除吗？</p>
      <div style="text-align: right; margin: 0">
        <el-button size="mini" type="text" @click="visible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="del">确定</el-button>
      </div>
    </el-popover>
    <el-dialog title="修改校区" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="校区名称" :label-width="formLabelWidth">
          <el-input v-model="form.campusName" ></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.campusAddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="校区电话" :label-width="formLabelWidth">
          <el-input v-model="form.campusCellphone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="校区座机" :label-width="formLabelWidth">
          <el-input v-model="form.campusLandline" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateCampus">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="删除校区" :visible.sync="dialogFormVisible1">
      <el-form :model="form1">
        <el-form-item label="校区名称" :label-width="formLabelWidth">
          <el-input v-model="form1.campusName" ></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form1.campusAddress" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="校区电话" :label-width="formLabelWidth">
          <el-input v-model="form1.campusCellphone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="校区座机" :label-width="formLabelWidth">
          <el-input v-model="form1.campusLandline" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="campusadd">确 定</el-button>
      </div>
    </el-dialog>
    <el-row>
      <el-col>
        <span style="float: left">可管理校区:{{ this.total }}</span>
        <el-button style="float: right" size="mini" @click="add" type="danger">添加</el-button>
      </el-col>
      <el-col>
        <template>
          <el-table
              ref="singleTable"
              :data="tableData"
              style="width: 100%">
            <el-table-column
                property="id"
                label="校区代码"
                width="120">
            </el-table-column>
            <el-table-column
                property="campusName"
                label="校区名称"
                width="120">
            </el-table-column>
            <el-table-column
                property="campusAddress"
                label="地址">
            </el-table-column>
            <el-table-column
                property="campusCellphone"
                label="校区电话">
            </el-table-column>
            <el-table-column
                property="campusLandline"
                label="校区座机">
            </el-table-column>
            <el-table-column
                property="creatTime"
                label="创建时间">
            </el-table-column>
            <el-table-column
                label="操作">
              <template slot-scope="scope">
                <el-button size="mini" @click="edit(scope)" type="primary">编辑</el-button>
                <el-button size="mini" @click="open(scope)" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {updateCenterAndZoom} from "echarts/lib/action/roamHelper";

export default {
  name: "campusset",
  data() {
    return {
      tableData: [],
      total: 0,
      visible: false,
      campusid:0,
      dialogFormVisible:false,
      dialogFormVisible1:false,
      form:{},
      form1:{},
      formLabelWidth: '120px'
    };
  },
  mounted() {
    this.$axios.get("/schoolSet/findCampus",).then(res => {
      console.log(res.data)
      this.tableData = res.data.data.records
      this.total = res.data.data.total
    })
  },
  methods: {
    updateCenterAndZoom,
    campusadd() {
      this.$axios.post("/schoolSet/insertCampus",this.form1,{transformRequest:[function (data1,headers){
          //这个请求不需要请求头(在此处删除，上方设置的请求头。)
          console.log(headers)
          // if(headers.Authorization){
          //   delete headers.Authorization;
          //   delete headers.r;
          //
          // }
          return data1;
        }],}).then(res=>{
        console.log(res.data)
        if(res.data.code==200){
          this.$message.success("添加成功")
        }else {
          this.$message.error("添加失败")
        }
      })
    },
    open(scope){
      this.visible=true
      this.campusid= scope.row.id
    },
    del() {
      this.visible=false
      this.$axios.get("/schoolSet/delCampus/"+this.id).then(res=>{
        console.log(res.data)
        if (res.data.code==200){
          this.$message.success("删除成功")
        }else {
          this.$message.error("删除失败")
        }
      })
    },
    add(){
      this.dialogFormVisible1=true;
    }
    ,
    edit(scope) {
       this.dialogFormVisible=true;
      console.log(scope.row)
      this.form=scope.row
    },
    updateCampus(){
      this.$axios.post("/schoolSet/updateCampus",this.form).then(res=>{
        console.log(res.data)
        if(res.data.code==200){
          this.$message.success("修改成功")
        }else {
          this.$message.error("修改失败")
        }
      })
    }

  }
}
</script>

<style scoped>

</style>